<template>
    <div class="detail">
        <div class="top">
            <van-nav-bar
                title="详情"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
            />
        </div>
        <div class="shop-head" :style="{backgroundImage: `url(${shopinfo.info && shopinfo.info.poi_back_pic_url})`}">
            <img class="logo" v-lazy="shopinfo.info && shopinfo.info.picUrl"/>
            <span class="name">{{ shopinfo.info && shopinfo.info.name }}</span>
            <van-icon name="like-o" color="white" size="22px" @click="collect"/>
        </div>

        <div class="box">
            <div class="left">
                <div @click="currentIndex = index" class="cate" v-for="(item, index) in shopinfo.taglist" :key="index">
                {{ item.name }}
            </div>
        </div>
        <div class="right">
            <div class="good" v-for="(item, index) in shopinfo.taglist && shopinfo.taglist[currentIndex].goodlist" :key="index">
                <div class="img-box">
                    <img v-lazy="item.picture"/>
                </div>
                <div class="text">
                    <div class="name">{{ item.name }}</div>
                    <div class="price">{{ item.min_price }}</div>
                </div>
            </div>
        </div>
    </div> 
    </div>
</template>

<script setup>

import { user_shopinfo } from '../api'
import { useRouter,useRoute } from 'vue-router' 
import { onMounted,ref } from '@vue/runtime-core';
import { showToast,showDialog } from 'vant';

var $router = useRouter()   //获取路由管理对象
var $route = useRoute()

// console.log($route);

var currentIndex = ref(0)       //用来保存分类下标
var shopinfo = ref([])   

var onClickLeft = ()=>{
    $router.push('/index/home')
}

var collect = ()=>{
    showToast('收藏成功')
}

onMounted(()=>{

    user_shopinfo({id:$route.params.id }).then((res)=>{
        if( res.data.code == 200 ){
            shopinfo.value = res.data.shopinfo;
            console.log(shopinfo.value);
        }else{
            showDialog({message:res.data.msg}).then((res)=>{
                if(res == 'confirm'){
                    $router.go(-1);
                }
            })
        }
    })
})


</script>


<style scoped>
.butt{
    text-align: left;
    background-color: aquamarine;
    border: none;
}
.shop-head {
    background-size: cover;
    display: flex;
    align-items: center;
    padding: 50px 20px;
}
.shop-head img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}
.shop-head .name {
    color: white;
    font-size: 18px;
}
.box {
    display: flex;
    margin-top: 10px;
}
.box .left {
    font-size: 14px;
    text-align: center;
    width: 150px;
    height: 560px;
    line-height: 45px;

    margin-right: 10px;
}
.box .right .good {
    flex: 1;
    display: flex;
    background-color: rgb(255, 255, 255);
    box-sizing: border-box;
    margin: 10px 5px;
}
.box .right .img-box {
    width: 100px;
    margin-right: 10px;
}
.box .right .img-box img {
    width: 100%;
}
.box .right .text {
    flex: 1;
}

</style>